<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle}">搜索视频</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="/" class="logo">🎬 VideoTech</a>
            <ul class="nav-links">
                <li><a href="/">首页</a></li>
                <li><a href="/upload">上传</a></li>
                <li><a href="/search" class="active">搜索</a></li>
                <li><a href="/h2-console" target="_blank">数据库</a></li>
            </ul>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <!-- 页面标题 -->
            <h1 class="page-title">搜索视频</h1>

            <!-- 搜索框 -->
            <div class="search-container">
                <input type="text" id="searchInput" class="search-input" placeholder="输入关键词搜索视频...">
                <button class="search-button">🔍</button>
            </div>

            <!-- 搜索结果 -->
            <div class="video-grid" id="searchResults">
                <!-- 搜索结果将通过JavaScript动态加载 -->
            </div>

            <!-- 默认显示 -->
            <div class="default-content" style="text-align: center; padding: 3rem; color: var(--text-muted);">
                <div style="font-size: 4rem; margin-bottom: 1rem;">🔍</div>
                <h3>开始搜索</h3>
                <p>在上方输入关键词来搜索您想要的视频</p>
            </div>

            <!-- 返回按钮 -->
            <div style="text-align: center; margin: 3rem 0;">
                <a href="/" class="btn btn-primary">返回首页</a>
                <a href="/upload" class="btn btn-secondary" style="margin-left: 1rem;">上传视频</a>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer style="background: var(--card-bg); padding: 2rem 0; margin-top: 3rem; border-top: 1px solid var(--border-color);">
        <div class="container" style="text-align: center; color: var(--text-muted);">
            <p>&copy; 2024 VideoTech Platform. 科技感十足的视频平台.</p>
        </div>
    </footer>

    <script th:src="@{/js/app.js}"></script>
</body>
</html>
